<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
    .font-bold{
        font-size: 14px;
        margin: 20px 0;
    }
    .gray-bg{
        background: #fff;
    }
    .fixed-table-body,.fixed-table-pagination{
        padding: 0 40px;
    }
    .study{
        padding: 0 40px;
        width: 100%;
        margin-bottom: 20px;
        font-weight:bold;
    }
</style>
<body class="gray-bg">
<div class="row">
    <div class="col-sm-3">
        <div class="wrapper wrapper-content project-manager">

            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    用户姓名：
                        <label th:if="${user.username == null}"> - </label>
                        <label th:if="${user.username != null}"> <label th:text="${user.username}"></label> </label>
                </span>
            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    电话号码：
                        <label th:if="${user.mobile == null}"> - </label>
                        <label th:if="${user.mobile != null}"> <label th:text="${user.mobile}"></label> </label>
                </span>
            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    详细地址：
                            <label th:if="${user.liveAddress == null}"> - </label>
                            <label th:if="${user.liveAddress != null}"> <label th:text="${user.liveAddress}"></label> </label>
                </span>
            </p>

        </div>
    </div>

    <input type="hidden" id="userType" th:value='${user.userType}'>

    <div class="col-sm-3">
        <div class="wrapper wrapper-content animated fadeInUp">

            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    政治面貌：
                            <label th:if="${user.politicalAffiliation == null}"> - </label>
                            <label th:if="${user.politicalAffiliation != null}"> <label th:text="${user.politicalAffiliation}"></label> </label>
                </span>
            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    职务职称：
                            <label th:if="${user.officialCapacity == null}"> - </label>
                            <label th:if="${user.officialCapacity != null}"> <label th:text="${user.officialCapacity}"></label> </label>
                </span>
            </p>
            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        单位名称：
                                <label th:if="${user.school == null}"> - </label>
                                <label th:if="${user.school != null}"> <label th:text="${user.school}"></label> </label>
                    </span>
            </p>
        </div>
    </div>

    <div class="col-sm-3">
        <!--学生-->
        <div class="student">



        </div>

        <!--老师 -->
        <div class="teacher">
            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        单位所在地：
                                <label th:if="${user.schoolAddress == null}"> - </label>
                                <label th:if="${user.schoolAddress != null}"> <label th:text="${user.schoolAddress}"></label> </label>
                    </span>
            </p>
            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        单位详细地址：
                                <label th:if="${user.schoolIndetailAddress == null}"> - </label>
                                <label th:if="${user.schoolIndetailAddress != null}"> <label th:text="${user.schoolIndetailAddress}"></label> </label>
                    </span>
            </p>



            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        职称信息：
                                <label th:if="${user.officialCapacityName == null}"> - </label>
                                <label th:if="${user.officialCapacityName != null}"> <label th:text="${user.officialCapacityName}"></label> </label>
                    </span>
            </p>

            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        备注：
                                <label th:if="${user.remark == ''}"> - </label>
                                <label th:if="${user.remark != ''}"> <label th:text="${user.remark}"></label> </label>
                    </span>
            </p>

        </div>
        <!--学习总时长 -->
    </div>
    <input type="hidden" th:value="${user.id}" id="userId">
</div>
<div th:include="include::footer"></div>
<!--<script src="//s.xlongwei.com/res/js/My97DatePicker/WdatePicker.js"></script>-->
<script>

    var type = $("#userType").val();
       if( type == 0 ){
           $(".teacher").hide();
       }else if( type == 1 ) {
           $(".student").hide();
       }
    var prefix = "/sys/user";
    $(function () {
        // load();
    });
    // var loadings = layer.load();
    function load() {
        $('#exampleTable')
            .bootstrapTable(
                {
                    method: 'get', // 服务器数据的请求方式 get or post
                    url: prefix + "/userRecord", // 服务器数据的加载地址
                    //	showRefresh : true,
                    //	showToggle : true,
                    //	showColumns : true,
                    iconSize: 'outline',
                    toolbar: '#exampleToolbar',
                    striped: true, // 设置为true会有隔行变色效果
                    dataType: "json", // 服务器返回的数据类型
                    pagination: true, // 设置为true会在底部显示分页条
                    singleSelect: false, // 设置为true将禁止多选
                    // contentType : "application/x-www-form-urlencoded",
                    // //发送到服务器的数据编码类型
                    pageSize: 10, // 如果设置了分页，每页数据条数
                    pageNumber: 1, // 如果设置了分布，首页页码
                    //search : true, // 是否显示搜索框
                    showColumns: false, // 是否显示内容下拉框（选择显示的列）
                    sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
                    queryParamsType: "",
                    // //设置为limit则会发送符合RESTFull格式的参数
                    queryParams: function (params) {
                        return {
                            //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                            pageNumber: params.pageNumber,
                            pageSize: params.pageSize,
                            id:$('#userId').val()
                        };
                    },
                    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                    // queryParamsType = 'limit' ,返回参数必须包含
                    // limit, offset, search, sort, order 否则, 需要包含:
                    // pageSize, pageNumber, searchText, sortName,
                    // sortOrder.
                    // 返回false将会终止请求
                    responseHandler: function (res) {
                        layer.close(loadings);
                        console.log(res);
                        $('#studyTime').html(res.data.timeAll)
                        return {
                            "total": res.data.pageList.total,//总数
                            "rows": res.data.pageList.records   //数据
                        };
                    },
                    columns: [
                        // {
                        //     checkbox: true
                        // },
                        {
                            field: 'resourcesName',
                            title: '课程名称',
                            width: '400px'
                        },
                        {
                            field: 'time',
                            title: '学习时长',
                            width: '400px'
                        },
                        {
                            field: 'createrDate',
                            title: '学习时间',
                            width: '400px'
                        },
                        {
                            title: '操作',
                            field: 'id',
                            align: 'center',
                            visible:false
                        }]
                });
    }

    function reLoad() {
        $('#exampleTable').bootstrapTable('refresh');
    }


</script>
</body>
</html>
